import { Popup, NavBar } from "antd-mobile";

import CommentItem from "../CommentItem";
import CommentFooter from "../CommentFooter";
import CommentInput from "../CommentInput";

import styles from "./index.module.scss";
import {
    AddCommentReply,
    ApiRes,
    ArtComment,
    ArticleComment,
} from "@/types/data";
import { useEffect, useState } from "react";
import { http } from "@/utils/http";
import NoneComment from "@/components/NoneComment";

type Props = {
    onClose: (id: string, total: number) => void;
    commentItem: ArtComment;
    onReplyThumbsUp: (id: string, is_liking: boolean) => void;
    art_id: string;
};

const Reply = ({ onClose, commentItem, art_id, onReplyThumbsUp }: Props) => {
    // 原始评论项的状态
    const [originComment, setOriginComment] = useState(commentItem);
    // 拿到原始评论的 id
    const { com_id, aut_name, is_liking, like_count } = originComment;
    // 评论项的回复列表状态
    const [commentReply, setCommentReply] = useState({} as ArticleComment);
    // 对评论进行点赞
    const onOriginThumbsUp = () => {
        // 通知父组件更新该评论的点赞状态
        onReplyThumbsUp(com_id, is_liking);

        const likeCount = is_liking ? -1 : 1;
        setOriginComment({
            ...originComment,
            is_liking: !is_liking,
            like_count: like_count + likeCount,
        });
    };
    useEffect(() => {
        const loadDdata = async () => {
            const res = await http.get<ApiRes<ArticleComment>>("/comments", {
                params: {
                    type: "c",
                    source: com_id,
                },
            });
            setCommentReply(res.data.data);
        };
        loadDdata();
    }, [com_id]);
    const [replyInput, setReplyInput] = useState(false);
    const [replyVisible, setReplyVisible] = useState(false);
    const onReplyInputShow = () => setReplyVisible(true);
    const onReplyInputHide = () => setReplyVisible(false);
    const onAddReply = async (content: string) => {
        const res = await http.post<ApiRes<AddCommentReply>>("/comments", {
            target: com_id,
            content,
            art_id,
        });

        setCommentReply({
            ...commentReply,
            total_count: commentReply.total_count + 1,
            results: [res.data.data.new_obj, ...commentReply.results],
        });

        onReplyInputHide();
    };
    // 关闭对回复弹出层，将当前评论的总数量传递给父组件
    const onBackToArticle = () => {
        onClose(com_id, commentReply.total_count);
    };
    return (
        <div className={styles.root}>
            <div className="reply-wrapper">
                <NavBar className="transparent-navbar" onBack={onBackToArticle}>
                    {commentItem.reply_count}条回复
                </NavBar>

                {/* 要回复的评论 */}
                <div className="origin-comment">
                    <CommentItem
                        {...originComment}
                        onThumbsUp={onOriginThumbsUp}
                        type="origin"
                    />
                </div>

                <div className="reply-list">
                    <div className="reply-header">全部回复</div>
                    {commentReply.total_count > 0 ? (
                        commentReply.results.map((item) => (
                            <CommentItem
                                key={item.com_id}
                                {...item}
                                type="reply"
                            />
                        ))
                    ) : (
                        <NoneComment />
                    )}
                </div>
                <CommentFooter
                    placeholder="去评论"
                    type="reply"
                    onCommentPopup={onReplyInputShow}
                />

                <Popup
                    className="reply-popup"
                    position="bottom"
                    visible={replyVisible}>
                    <CommentInput
                        name={aut_name}
                        onClose={onReplyInputHide}
                        onAddComment={onAddReply}
                    />
                </Popup>
            </div>
        </div>
    );
};

export default Reply;
